<template>
  <div class="commentFloor">
    <div class="avatarArea">
      <img :src="props.commentData.user.avatarUrl" alt="" />
    </div>
    <div class="contentArea">
      <div class="commentContent">
        <span class="user">{{ props.commentData.user.nickname }} ：</span>
        <span class="content">{{ props.commentData.content }}</span>
      </div>
      <div class="commentInfo">
        <div class="date">
          {{ transDate(props.commentData.timeStr) }}
        </div>
        <div class="interaction">
          <div class="interactionItem gap hide">举报</div>

          <div class="interactionItem gap">
            <SvgIcon
              icon-name="icondianzan"
              :size="14"
              :class-name="'interactionIcon'"
            />
            <span>
              {{ props.commentData.likedCount }}
            </span>
          </div>
          <div class="interactionItem gap">
            <SvgIcon
              icon-name="iconfenxiang"
              :size="13"
              :class-name="'interactionIcon'"
            />
          </div>
          <div class="interactionItem">
            <SvgIcon
              icon-name="iconjianyi"
              :size="14"
              :class-name="'interactionIcon'"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Comment } from "@/types/comment";

function transDate(timeStr: string) {
  let result = timeStr;
  try {
    const timeSplit = timeStr.split("-");
    if (timeSplit.length === 1) {
      result = timeSplit[0];
    } else if (timeSplit.length === 2) {
      const [month, date] = timeSplit;

      result = `${month}月${date}日`;
    } else if (timeSplit.length === 3) {
      const [year, month, date] = timeSplit;
      result = `${year}年${month}月${date}日`;
    }
  } catch (err) {}
  return result;
}

const props = defineProps<{
  commentData: Comment;
}>();
</script>

<style scoped lang="less">
.commentFloor {
  display: flex;
  height: 100%;
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
  .avatarArea {
    margin-right: 10px;
    width: 36px;
    img {
      width: 36px;
      border-radius: 18px;
      height: 36px;
      cursor: pointer;
    }
  }
  .contentArea {
    flex: 1;
    height: 36px;
    .commentContent {
      line-height: 18px;
      display: flex;
      align-items: flex-start;
      .user {
        font-size: 12px;
        color: #507daf;
        cursor: pointer;
        &:hover {
          color: #375f8b;
        }
      }
      .content {
        font-size: 12px;
        color: #373737;
      }
    }
    .commentInfo {
      height: 20px;
      display: flex;

      justify-content: space-between;
      &:hover {
        .interaction .interactionItem.hide {
          display: flex;
        }
      }
      .date {
        font-size: 12px;
        color: #9f9f9f;
        height: 20px;
        display: flex;
        align-items: flex-end;
      }
      .interaction {
        display: flex;
        align-items: center;

        .interactionItem {
          &.hide {
            display: none;
          }
          padding-left: 10px;
          color: #666;
          font-size: 12px;
          display: flex;
          align-items: center;
          cursor: pointer;
          &:hover {
            color: #373737;
            .interactionIcon {
              fill: #373737;
            }
          }
          &.gap {
            &:after {
              content: "";
              display: inline-block;
              height: 12px;
              margin-left: 10px;
              width: 1px;
              background-color: #9f9f9f;
            }
          }
          .interactionIcon {
            fill: #666;
          }
        }
      }
    }
  }
}
</style>
